<template>
  <div class="ranking-list">
    <a-table
      v-show="dataList.length !== 0"
      :scroll="tableScroll"
      :transform-cell-text="transformCellText"
      style="min-height: 650px"
      :columns="tableColumns"
      :data-source="dataList"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'fileName'">
          <a-button type="link" :title="record?.fileName" class="file-name-wrap elliptical-1" @click.stop="handleDownload(record)">{{
            record.fileName
          }}</a-button>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <div :class="['table__status', getTaskStatusItem(record.status)?.isError && 'error']">
            {{ getTaskStatusItem(record.status)?.name }}
          </div>
        </template>
      </template>
    </a-table>

    <my-infinite-loading :empty="dataList?.length === 0" :show-bottom-text="false" :identifier="identifier" @infinite="loadData">
      <template #empty>
        <div class="ranking-list">
          <div v-show="dataList.length === 0" class="empty">暂未参与</div>
        </div>
      </template>
    </my-infinite-loading>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { computed, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { hitContestApi } from '@/services/api'
  import { filterTableColumns } from '@/utils'
  import { downloadFile, transformCellText } from '@/utils'

  import { getTaskStatusItem } from '../../options'

  export interface PageForm {
    offset: number
    limit: number
    taskId: string
  }

  const route = useRoute()

  const taskId = route.params.id as string

  const tableColumns = ref(
    filterTableColumns([
      {
        title: '提交文件',
        dataIndex: 'fileName',
        fixed: 'left',
        width: 180
      },
      {
        title: '提交时间',
        dataIndex: 'createTime',
        fixed: 'left',
        width: 180
      },
      {
        title: '服务状态',
        dataIndex: 'status',
        width: 120,
        fixed: 'left'
      },
      {
        title: '评测完成时间',
        dataIndex: 'endTime',
        width: 180,
        fixed: 'left'
      },
      {
        title: '分数',
        dataIndex: 'score',
        width: 86
      }
    ])
  )

  const tableScroll = computed(() => {
    const scrollX = tableColumns.value.reduce((prev, curr) => {
      return prev + (curr.width as number)
    }, 0)
    return scrollX > 1022 ? { x: scrollX } : undefined
  })

  const dataList = ref<any[]>([])

  const identifier = ref<number>(1)
  const pageForm = ref<PageForm>({
    offset: 1,
    limit: 12,
    taskId: taskId
  })
  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = await hitContestApi.myRecord(pageForm.value)
      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      let listHead = records?.[0]?.listHead || []
      if (listHead.length) {
        for (let index = 0; index < listHead.length; index++) {
          const element = listHead[index]
          tableColumns.value.push({
            title: element,
            dataIndex: element,
            width: 180
          })
        }
      }
      const list: any[] = records.map((record: any) => {
        let composition = record?.composition || ''
        composition = composition && JSON.parse(composition)
        // 数组转对象
        composition =
          composition &&
          composition.reduce((prev: any, curr: any) => {
            return {
              ...prev,
              [curr.name]: curr.values
            }
          }, {})
        return {
          ...record,
          ...composition
        }
      })
      dataList.value.push(...list)
    } catch (error) {
      $state.error()
    }
  }

  const handleDownload = (record: any) => {
    message.success('开始下载')
    downloadFile(record.fileUrl, record.fileUrl)
  }
</script>

<style lang="less" scoped>
  .ranking-list {
    width: 100%;
  }

  .file-name-wrap {
    display: flex;
    width: 100%;
    min-width: 0;

    :deep(> span) {
      .elliptical-1();
    }
  }

  .empty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1026px;
    height: 670px;
    font-size: 14px;
    color: rgba(17, 22, 31, 0.52);
    background: #fff;
    border: 1px solid #e8e9eb;
    border-radius: 10px;
    font-weight: 400;
    line-height: 22px;
  }
</style>
